<template>
    <div>
        <el-dialog
            :title="title"
            :visible.sync="dialogFlag"
            width="1200px"
            append-to-body
            center
        >
            <el-form
                ref="form"
                :model="form"
                label-width="160px"
                label-suffix="："
                v-if="form"
            >
                <el-card class="box-card" style="margin-bottom: 20px">
                    <div slot="header" class="clearfix">
                        <span>{{ $t('employment_information') }}</span>
                    </div>
                    <el-row :gutter="20">
                        <!-- 补充 -->
                        <el-col :span="8" v-if="fieldConfig.employmentForm">
                            <el-form-item :label="$t('employment_type')">
                                <dict-tag
                                    :options="dict.type.employment_type"
                                    :value="form.employmentForm"
                                />
                            </el-form-item>
                        </el-col>

                        <el-col :span="8" v-if="fieldConfig.workNo">
                            <el-form-item :label="$t('employee_number')">
                                {{ form.workNo }}
                            </el-form-item>
                        </el-col>
                        <el-col :span="8" v-if="fieldConfig.employeeStatus">
                            <el-form-item :label="$t('employment_status')">
                                <dict-tag
                                    :options="dict.type.job_status"
                                    :value="form.employeeStatus"
                                />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="8" v-if="fieldConfig.entryDate">
                            <el-form-item :label="$t('date_of_hire')">
                                {{ form.entryDate }}
                            </el-form-item>
                        </el-col>
                        <el-col :span="8" v-if="fieldConfig.probationPeriod">
                            <el-form-item :label="$t('probation_period')">
                                {{ form.probationPeriod
                                }}<dict-tag
                                    style="display: inline-block"
                                    :options="dict.type.day_unit"
                                    :value="form.probationUnit"
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8" v-if="fieldConfig.confirmationDate">
                            <el-form-item :label="$t('permanent_employment')">
                                {{ form.confirmationDate }}
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="8" v-if="fieldConfig.separationDate">
                            <el-form-item :label="$t('resignation_date')">
                                {{
                                    parseTime(
                                        form.separationDate,
                                        '{y}-{m}-{d}'
                                    )
                                }}
                            </el-form-item>
                        </el-col>
                        <el-col :span="8" v-if="fieldConfig.seniority">
                            <el-form-item :label="$t('seniority')">
                                {{ form.seniority }}
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row :gutter="20">
                        <el-col :span="8" v-if="fieldConfig.employerId">
                            <el-form-item
                                :label="$t('employing_company')"
                                prop="employerId"
                            >
                                <employerSelect
                                    v-model="form.employerId"
                                    disabled
                                ></employerSelect>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8" v-if="fieldConfig.position">
                            <el-form-item :label="$t('position')">
                                <dict-tag
                                    :options="positionOptions"
                                    :value="form.position"
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8" v-if="fieldConfig.position">
                            <el-form-item :label="$t('rank')">
                                <!-- <dict-tag
                                    :options="positionGradeOptions"
                                    :value="form.position"
                                /> -->
                                {{ form.rankName }}
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row :gutter="20">
                        <el-col :span="8" v-if="fieldConfig.division">
                            <el-form-item
                                :label="$t('division')"
                                prop="division"
                            >
                                <treeselect
                                    disabled
                                    :normalizer="normalizer"
                                    v-model="form.division"
                                    :options="deptOptions"
                                    :show-count="true"
                                    placeholder="
                                       
                                    "
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8" v-if="fieldConfig.department">
                            <el-form-item :label="$t('department')">
                                {{ form.department ? form.departmentName : '' }}
                            </el-form-item>
                        </el-col>
                        <el-col :span="8" v-if="fieldConfig.branch">
                            <el-form-item :label="$t('branch')" prop="branch">
                                <treeselect
                                    disabled
                                    :normalizer="normalizer"
                                    v-model="form.branch"
                                    :options="deptOptions"
                                    :show-count="true"
                                    placeholder="
                                        
                                    "
                                />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="8" v-if="fieldConfig.team">
                            <el-form-item :label="$t('team')" prop="team">
                                <treeselect
                                    disabled
                                    :normalizer="normalizer"
                                    v-model="form.team"
                                    :options="deptOptions"
                                    :show-count="true"
                                    placeholder="
                                      
                                    "
                                />
                            </el-form-item>
                        </el-col>
                        <el-col
                            :span="8"
                            v-if="fieldConfig.immediateSupervisor"
                        >
                            <el-form-item
                                :label="$t('immediate_supervisor')"
                                prop="immediateSupervisor"
                            >
                                <el-select
                                    disabled
                                    v-model="form.immediateSupervisor"
                                    filterable
                                    placeholder="
                                       
                                    "
                                >
                                    <el-option
                                        v-for="(
                                            item, index
                                        ) of immediateSupervisorList"
                                        :key="index"
                                        :label="item.employeeName"
                                        :value="item.id"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="8" v-if="fieldConfig.region">
                            <el-form-item :label="$t('region')">
                                {{ form.region }}
                            </el-form-item>
                        </el-col>
                        <el-col :span="8" v-if="fieldConfig.costCenter">
                            <el-form-item
                                :label="$t('cost_center')"
                                prop="costCenter"
                            >
                                <treeselect
                                    disabled
                                    :normalizer="normalizer"
                                    v-model="form.costCenter"
                                    :options="deptOptions"
                                    :show-count="true"
                                    placeholder="
                                       
                                    "
                                />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="8" v-if="fieldConfig.professional">
                            <el-form-item
                                :label="$t('national_professional_title')"
                            >
                                {{ form.professional }}
                            </el-form-item>
                        </el-col>

                        <!-- 最终补充 -->
                        <el-col :span="8" v-if="fieldConfig.firstTimeWork">
                            <el-form-item
                                :label="$t('date_of_first_employment')"
                            >
                                {{ form.firstTimeWork }}
                            </el-form-item>
                        </el-col>
                        <el-col :span="8" v-if="fieldConfig.legalSeniority">
                            <el-form-item :label="$t('mainland_china')">
                                {{ form.legalSeniority }}
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="8">
                            <el-form-item :label="$t('remarks')">
                                {{ form.remark }}
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-card>
                <!-- <el-card class="box-card" style="margin-bottom: 20px">
          <div slot="header" class="clearfix">
            <span>过往职位记录</span>
          </div>
        </el-card> -->
                <el-card class="box-card" style="margin-bottom: 20px">
                    <div slot="header" class="clearfix">
                        <span>{{ $t('payroll_information') }}</span>
                    </div>
                    <el-row :gutter="20">
                        <el-col :span="8">
                            <el-form-item :label="$t('payroll_type')">
                                <dict-tag
                                    :options="dict.type.salary_type"
                                    :value="form.salaryForm"
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item :label="$t('settlement_currency')">
                                <dict-tag
                                    :options="dict.type.currency_type"
                                    :value="form.calculationCurrency"
                                />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-table :data="form.fixedList" border :max-height="tableHeight">
                        <el-table-column
                            align="center"
                            :label="$t('fixed_salary')"
                        >
                            <el-table-column
                                :label="$t('pay_item')"
                                align="center"
                                prop="name"
                                :show-overflow-tooltip="true"
                            />
                            <el-table-column
                                :label="$t('payment_amount')"
                                align="center"
                                prop="remuneration"
                            />
                            <el-table-column
                                :label="$t('effective_date')"
                                align="center"
                                prop="effectiveDate"
                            />
                            <el-table-column
                                :label="$t('expiry_date')"
                                align="center"
                                prop="expirationDate"
                            />
                            <el-table-column
                                :label="$t('status')"
                                align="center"
                                width="150"
                            >
                                <template slot-scope="scope">
                                    {{ getStatusText(scope.row) }}
                                </template>
                            </el-table-column>
                            <el-table-column
                                :label="$t('remarks')"
                                prop="remark"
                                align="center"
                                :show-overflow-tooltip="true"
                            />
                        </el-table-column>
                    </el-table>
                    <el-table
                        :data="form.nonFixedList"
                        style="margin-top: 20px"
                    >
                        <el-table-column
                            align="center"
                            :label="$t('variable_pay')"
                        >
                            <el-table-column
                                :label="$t('pay_item')"
                                prop="name"
                                align="center"
                                :show-overflow-tooltip="true"
                            />
                            <el-table-column
                                :label="$t('payment_amount')"
                                align="center"
                                prop="remuneration"
                            />
                            <el-table-column
                                :label="$t('effective_date')"
                                prop="effectiveDate"
                            />
                            <el-table-column
                                :label="$t('expiry_date')"
                                prop="expirationDate"
                            />
                            <el-table-column
                                :label="$t('remarks')"
                                align="center"
                                prop="remark"
                                :show-overflow-tooltip="true"
                            />
                        </el-table-column>
                    </el-table>
                </el-card>
                <el-card class="box-card" style="margin-bottom: 20px">
                    <div slot="header" class="clearfix">
                        <span>{{ $t('settings') }}</span>
                    </div>
                    <el-row :gutter="20">
                        <el-col :span="8">
                            <el-form-item
                                :label="$t('affiliated_payroll_group')"
                            >
                                {{ form.compensationGroupName }}
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item
                                :label="$t('affiliated_performance_group')"
                            >
                                {{ form.performanceGroupName }}
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="8">
                            <el-form-item :label="$t('affiliated_leave_group')">
                                {{ form.vacationGroupName }}
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item
                                :label="$t('affiliated_attendance_group')"
                            >
                                {{ form.attendanceGroupName }}
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-card>
            </el-form>
        </el-dialog>
    </div>
</template>
<script>
import {
    getPositionList,
    getEmployerSalaryGroup,
    getEmployerPerformanceGroup,
    getEmployerVacationGroup,
    getCheckWorkGroupList,
    pageListByEmployer,
} from '@/api/custom/employeeList';
import { deptTreeSelect } from '@/api/system/user';
import Treeselect from '@riophae/vue-treeselect';
import employerSelect from '@/views/components/custom/employerSelect.vue';
export default {
    name: 'Employee',
    dicts: [
        'job_status',
        'employment_type',
        'salary_type',
        'currency_type',
        'day_unit',
    ],
    components: {
        employerSelect,
        Treeselect,
    },
    props: {
        fieldConfig: {
            type: Object,
            default() {
                return {};
            },
        },
    },
    data() {
        return {
            title: '',
            // 是否显示弹出层
            dialogFlag: false,
            // 表单参数
            form: null,
            fixedList: [], //固定薪资
            nonFixedList: [], //非固定薪资
            //职位
            positionOptions: [],
            positionGradeOptions: [],
            deptOptions: [],
            immediateSupervisorList: [],
        };
    },
    created() {},
    mounted() {
        console.log('fieldConfig', this.fieldConfig);
    },
    methods: {
        pageListByEmployer(employerId) {
            pageListByEmployer({
                pageSize: 999,
                pageNum: 1,
                employerId,
            }).then((res) => {
                this.immediateSupervisorList = [
                    { employeeName: '无', id: '-1' },
                    ...res.data.records,
                ];
            });
        },
        normalizer(node) {
            if (!node.children || (node.children && !node.children.length)) {
                delete node.children;
            }
            return {
                id: node.id,
                label: node.deptName,
                children: node.children,
            };
        },
        /** 查询部门下拉树结构 */
        getDeptTree(data) {
            deptTreeSelect(data).then((response) => {
                this.deptOptions = response.data;
            });
        },
        getPositionGrade() {
            const findItem = this.positionOptions.find((item) => {
                return item.value == this.form.position;
            });
            this.positionGradeOptions = findItem
                ? findItem.rankDTOList.map((v) => {
                      return {
                          label: v.rankName,
                          value: v.positionId,
                          raw: {
                              listClass: '',
                          },
                      };
                  })
                : [];
        },
        /*查询职位下拉数据*/
        getPositionList() {
            getPositionList({
                pageNum: 1,
                pageSize: 999,
                employerId: this.form.employerId,
            }).then((res) => {
                this.positionOptions = res.data.records.map((item) => {
                    console.log("🐛 ~ this.positionOptions=res.data.records.map ~ item:", item)
                    if(item.id !=this.form.position){
                        this.form.position = '';
                    }else{
                        this.form.position = item.id;
                    }
                    if (item.rankList && item.rankList.length) {
                        item.rankList = item.rankList.map((rankItem) => {
                            return {
                                label: rankItem.rankName,
                                value: rankItem.id,
                                raw: {
                                    listClass: '',
                                },
                            };
                        });
                    } else {
                        item.rankList = [];
                    }
                    return {
                        ...item,
                        label: item.positionName,
                        value: item.id,
                        raw: {
                            listClass: '',
                        },
                    };
                });
                console.log(
                    '🐛 ~ this.positionOptions=res.data.records.map ~ this.positionOptions:',
                    this.positionOptions
                );
                
                this.getPositionGrade();
            });
        },
        // 取消按钮
        cancel() {
            this.dialogFlag = false;
        },
        /** 查看操作 */
        open(row) {
            this.form = row;
            this.dialogFlag = true;
            this.$nextTick(() => {
                this.getPositionList();
                this.getDeptTree(row.employerId);
                this.pageListByEmployer(row.employerId);
            });
        },
        getStatusText(row) {
            if (row.expirationDate) {
                const newDataTime = new Date().getTime();
                const endDateTime = new Date(row.expirationDate).getTime();
                const startDateTime = new Date(row.effectiveDate).getTime();
                if (startDateTime > newDataTime) {
                    return this.$t('not_effective');
                } else if (endDateTime > newDataTime) {
                    return this.$t('in_effect');
                } else {
                    return this.$t('expired');
                }
            } else {
                return this.$t('in_effect');
            }
        },
    },
};
</script>
<style scoped lang="scss">
.header-block {
    padding: 0 20px;
}
</style>
